<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/aihao.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2112239_tf400a87if.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
    <div class="back">
        <img  src="images/timg (6).gif" alt="">
        <div class="zh1">
            <a href="file:///H:/%E5%A4%A7%E4%BD%9C%E4%B8%9A/%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF.html"><img src="images/shangyige (1).png" alt=""></a>
        </div>
        <div class="zh2">
            <a href="https://wang-xue0.gitee.io/work22/"><img src="images/xiayige (1).png" alt=""></a>
        </div>
        <div class="kuangjia">         
            <div class="title">
                <p>个人爱好</p>
            </div>
            <div class="zx">
                <div class="z1">
                    <a href="#">明星</a>
                </div>
                <div class="z2">
                    <img src="images/aihao/图片1.jpg" alt="">
                </div>
                <div class="z3">
                    <a href="https://b23.tv/wWl0lU">陈立农</a>
                </div>
                <div class="z4">
                    <img src="images/aihao/图片2.jpg" alt="">
                </div>
            </div>
            <div class="dm">
                <div class="d1">
                    <a href="#">动漫</a>
                </div>
                <div class="d2">
                    <img src="images/aihao/图片7.jpg" alt="">
                </div>
                <div class="d3">
                    <img src="images/aihao/图片8.jpg" alt="">
                </div>
                <div class="d4">
                    <p>斗罗大陆</p>
                </div>
                <div class="d5">
                    <img src="images/aihao/图片3.png" alt="">
                </div>
            </div>
            <div class="dy">
                <div class="y1">
                    <p>电影</p>
                </div>
                <div class="y2">
                    <div class="swiper-content">                      
                            <img src="images/aihao/图片4.jpg" alt="">                       
                            <img src="images/aihao/图片5.jpg" alt="">                        
                            <img src="images/aihao/图片6.jpg" alt="">                      
                            <img src="images/aihao/9.jpg" alt="">                       
                            <img src="images/aihao/10.jpg" alt="">                       
                            <img src="images/aihao/11.jpg" alt="">                    
                    </div>
                    <button id="prev">
                        <span class="iconfont  icon-zuo"></span>
                    </button>
                    <button id="next">
                       <span class="iconfont  icon-you"></span>
                    </button>
                    <div id="btns">
                        <span class="current"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="y3">
                    <a href="https://www.iqiyi.com/v_19rrifwg5x.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01">招魂</a>
                    <a href="https://pan.baidu.com/s/1SEAAW1j4TvkGmHw3cihKrA">修女</a>
                    <a href="https://v.youku.com/v_show/id_XODA1MjA2ODQw.html">安娜贝尔</a>
                    <a href="https://v.youku.com/v_show/id_XNjY0MzIzNTA0.html?spm=a2h1n.8261147.0.0&s=2a16e304b7d511df97c0">潜伏</a>
                    <a href="https://www.xcvod.com/vod-play-id-10722-src-1-num-1.html">闪灵</a>
                    <a href="https://www.iqiyi.com/v_19rr9w9ry8.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01">孤儿怨</a>
                    <div class="huadong">
                        <span class="iconfont icon-Group-"></span>    
                      </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 封装:就是一段重复的代码写成函数
        let index = 0;
        $("#next").click(function () {
            index++;
            console.log(index)
            if (index > 5) {
                index = 0;
            }
            animate(1000)
        })
        
        $("#prev").click(function () {
            index--;
            if (index < 0) {
                index = 5;
            }
            animate(1000)
        })
        // 点击焦点让对应的下标值的图片显示,重置下标值
        $("#btns span").click(function(){
            index = $(this).index();
            // $(".swiper-content img").eq(index).fadeIn().siblings().fadeOut()
            // $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
            animate(1000)
        })
        function animate(speed) {
            $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed)
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        }
    </script>
     <script>
        
        // 对窗口执行滚动监听事件 $(window).scroll()
        //获取滚动条距离顶部的height $(window).scrollTop()
        // 1.对窗口执行滚动监听,获取滚条距离顶部的高度
        $(window).scroll(function(){
            let scrollTop = $(window).scrollTop();
            let opacity;
            console.log(scrollTop)
            opacity = scrollTop/200;
            // 2.当滚动条距离顶部的高度大于等于200px,opacity=1;
            if(scrollTop>=200){
                opacity = 1;
            }
            $(".huadong").css({opacity:opacity})
        })
        $(".huadong").click(function(){
            $("html").animate({scrollTop:"0px"},1000)
        })
    </script>
</body>
</html>